<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :label-width="model.labelWidth == null?'150px':model.labelWidth+'px'">
      <template v-for="(attr,index) in model.attrs" v-if="attr.need == true">
        <el-form-item :label="attr.describe">
          <template v-if="attr.type=='enum'">
            <el-select v-model="form[attr.name]" :placeholder="'请选择' + attr.describe">
              <template v-for="item in attr.enum">
                <el-option :label="item.name" :value="item.value"></el-option>
              </template>
            </el-select>
          </template>
          <template v-if="attr.type=='fetch-enum'">
            <el-select v-model="form[attr.name]" :placeholder="'请选择' + attr.describe">
              <template v-for="item in attr.enum">
                <el-option :label="item[attr.fetchEnumName==null?'name':attr.fetchEnumName]" :value="item[attr.fetchEnumValue==null?'value':attr.fetchEnumValue]"></el-option>
              </template>
            </el-select>
          </template>
          <template v-if="attr.type=='string'">
            <el-input v-model="form[attr.name]"></el-input>
          </template>
          <template v-if="attr.type=='text'">
            <el-input v-model="form[attr.name]" type="textarea" :rows="attr.rows == null?'12':attr.rows"></el-input>
          </template>
          <template v-if="attr.type=='int'">
            <el-input-number v-model="form[attr.name]"></el-input-number>
          </template>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  import { get, edit } from '@/api/rest-api'
  import request from '@/utils/request'

  export default {
    data() {
      return {
        form: {
        },
        roles: {}
      }
    },
    created() {
      this.form.id = this.$route.query.id
      get(this.model.apiUrlHeader, this.form.id).then(response => {
        this.form = response.data
        for (var index in this.model.attrs) {
          var attr = this.model.attrs[index]
          if (attr.default != null) {
            this.form[attr.name] = attr.default
          }
          if (attr.type === 'enum') {
            this.form[attr.name] = this.form[attr.name].value
          }
          if (attr.type === 'fetch-enum') {
            this.requestEnum(index, {
              url: attr.fetchEnumUrl,
              method: attr.fetchEnumMethod,
              params: attr.fetchEnumParams
            })
          }
        }
      })
    },
    props: {
      model: {
        type: Object,
        default: {}
      }
    },
    watch: {
      $route: {
        deep: false,
        handler(val) {
          location.reload()
        }
      }
    },
    methods: {
      requestEnum(index, param) {
        request(param).then(response => {
          var attr = this.model.attrs[index]
          var paths = attr.fetchEnumListName.split('.')
          attr.enum = response
          for (var i in paths) {
            var path = paths[i]
            attr.enum = attr.enum[path]
          }
          var obj = this.form
          obj = obj[attr.entity]
          obj = obj[attr.valueName]
          this.form[attr.name] = obj
          this.$forceUpdate()
        })
      },
      onSubmit() {
        edit(this.model.apiUrlHeader, this.form.id, this.form).then(response => {
          if (response.code === 1) {
            this.$message('修改成功!')
            this.$router.push({ path: this.model.router })
          } else {
            this.$message({
              message: response.msg,
              type: 'warning'
            })
          }
        })
      },
      onCancel() {
        this.$router.push({ path: this.model.router })
      }
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>
